/*
Disabling Stylelint's hex color rule here because the TypeScript migration dashboard, being external to the main app, doesn't use design tokens.
*/
/* stylelint-disable color-no-hex */
.dapp-swap {
  &_rounded-button {
    border-radius: 8px;
  }

  &_text-button {
    &:hover {
      background-color: transparent !important;
    }
  }

  &__tabs {
    margin-bottom: 20px;
    margin-top: 12px;
    border-bottom: 1px solid var(--color-border-muted);
  }

  &_dapp-swap-button {
    color: var(--color-text-default);
    width: 50%;

    &:hover {
      color: var(--color-text-default) !important;
      text-decoration: none !important;
    }
  }

  &_close-button {
    position: absolute;
    top: 6px;
    right: 10px;
  }

  &_callout {
    border-radius: 8px;
    position: relative;
    border: 1px solid var(--color-border-muted);
  }

  &_callout-text {
    margin-bottom: 4px;
  }

  &_text-rewards {
    color: var(--color-accent01-light);
  }

  &_callout-arrow {
    position: absolute;
    top: -8px;
    left: 75%;
    width: 14px;
    height: 14px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--color-background-section);
    border-left: 1px solid var(--color-border-muted);
    border-top: 1px solid var(--color-border-muted);
  }
}

.animate-mm-swap-text {
  background:
    linear-gradient(
      45deg,
      currentColor 0%,
      currentColor 35%,
      var(--color-success-default) 50%,
      currentColor 65%,
      currentColor 100%
    );
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wave-green 1.5s ease-in-out infinite;
  will-change: background-position;
}

@keyframes wave-green {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}
